<template>
  <div class="lang">
    <!-- <i class="el-icon-set-up" /> -->
    <el-dropdown @command.stop="handleCommand">
      <span class="el-dropdown-link">
        <i class="el-icon-set-up" />
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="zh">中文zh</el-dropdown-item>
        <el-dropdown-item command="en">英文en</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {}
  },
  methods: {
    handleCommand(lang) {
      this.$i18n.locale = lang
      this.$message.success('语言已切换为: ' + lang)
    }
  }
}
</script>
<style lang="scss" scoped>
.lang {
  // inline 行内元素- ---- 不能设置宽高
  // inline-block 行内块元素  --- 可以设置， 效果又不是占一整行
  // block  块级元素
  display: inline-block;
  font-size: 22px;
  color: #CCCCCC;
  margin-right: 15px;
  .el-dropdown-link {
    cursor: pointer;
    color: #CCCCCC;
  font-size: 20px;

  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>
